.commentable-container
  -webkit-transition all 0.22s ease
  transition all 0.22s ease

.side-comments-open
  -webkit-transform s("translate(-220px, 0)")
  -ms-transform s("translate(-220px, 0)")
  transform s("translate(-220px, 0)")

.commentable-section
  -webkit-box-sizing border-box
  -moz-box-sizing border-box
  box-sizing border-box
  padding-right 30px

.side-comment
  padding-bottom 20px
  text-align left
  .marker
    width 20px
    height 18px
    background #DEDEDC
    border-radius 2px
    text-decoration none
    span
      line-height 20px
      font-size 12px
    &:after
      content ""
      display block
      position absolute
      bottom -7px
      left 5px
      width 0
      border-width 7px 8px 0 0
      border-style solid
      border-color #DEDEDC transparent
  .comments-wrapper
    top -22px
    width 330px
    padding-bottom 120px
    width 210px
    opacity 0
    transition opacity .2s
  &.active
    .comments-wrapper
      opacity 1
  &.has-comments
    .comments-wrapper
      top -22px
  ul
    &.comments
      max-height 400px
      overflow auto
  .comment-body
    width 100%
    overflow hidden
  .author-avatar
    float left
    width 32px
    height 32px
    margin-right 10px
    img
      width 100%
      height 100%
      border-radius 100px
  .right-of-avatar
    float left
    width 260px
    width 140px
  .author-name
    font-size 15px
    line-height 16px
    margin 0 0 2px 0
    font-weight 700
    text-decoration none
    color #222
    small
      &.ago
        font-size 12px
        font-weight normal
  a
    &.author-name
      &:hover
        color #444
  .action-link
    color #B3B3B1
    font-size 13px
    text-decoration none
    &:hover
      text-decoration none
    &.post
      .post
        color #89C794
        &:hover
          color #468c54
    &.upvote
      margin-left 7px
      &:hover
        color green
    &.downvote
      margin-left 10px
      &:hover
        color red
  .voting
    font-size 20px
    .votes
      display inline-block
      font-size 14px
      font-weight bold
      text-align center
      width 32px
  .add-comment
    &:before
      content "+"
      border 2px solid #DEDEDC
      border-radius 100px
      width 23px
      height 23px
      color #DEDEDC
      display block
      text-align center
      font-size 16px
      font-weight 400
      line-height 18px
      float left
      margin-right 15px
      letter-spacing 0
      -webkit-box-sizing border-box
      -moz-box-sizing border-box
      box-sizing border-box
    &:hover
      text-decoration none
      color #4FAF62
      &:before
        border-color #4FAF62
        color #4FAF62
  .comment-box
    outline none
    border 0
    -webkit-box-shadow none
    box-shadow none
    padding 0
  .actions
    margin-top 5px
    a
      float left
    .cancel
      &:before
        content '\00B7'
        color #B3B3B1
        padding 0 5px
  .read-more
    margin-top 0px !important
    margin-bottom 10px !important
  .restricted
    display block
    margin-top 20px
  .comment-form
    .error
      color red
      font-size 12px

.side-comment .marker:before
.side-comment .marker span
  content "+"
  position absolute
  width 20px
  height 18px
  line-height 16px
  font-size 14px
  color #FFF
  text-align center

.side-comment .marker:hover
.side-comment.active .marker
  background #4FAF62

.side-comment .marker:hover:after
.side-comment.active .marker:after
  border-color #4FAF62 transparent

.side-comment ul.comments li
.side-comment .comment-form
  border 1px solid #F2F2F0
  border-left 0
  border-right 0
  padding 15px 14px
  margin-top -1px

.side-comment .comment
.side-comment .comment-box
  font-size 14px
  line-height 18px

.side-comment .action-link.cancel:hover
.side-comment .action-link.delete:hover
  color red

.side-comment .action-link.upvote i
.side-comment .action-link.downvote i
  font-size 20px
  font-weight bold

.side-comment .restricted
.side-comment .add-comment
  color #B3B3B1
  font-size 14px
  line-height 22px
  font-weight 300
  padding 0px 8px
  letter-spacing 0.05em
  text-decoration none
  margin-top 10px
  color #B3B3B1
  font-size 14px
  text-decoration none
  margin-top 10px

@media (max-width: 768px)
  .side-comments-open
    -webkit-transform s("translate(-220px, 0)")
    -ms-transform s("translate(-220px, 0)")
    transform s("translate(-220px, 0)")